<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/mainpage_notag.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>二手易</title>
<!-- InstanceEndEditable -->
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationConfirm.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> 
function refresh(){
var cap = document.getElementById("cimageframe");
cap.innerHTML = "<img src='cimage?a=" + Math.random() + "'/>";
} 
</script>
<%!
private String compare(String s1, String s2){
        if(s1.equals(s2)) return "selected='selected'";
		else return "";
}
%>
<%
String msg = request.getParameter("msg");
String age = (String)session.getAttribute("age");
String gender = (String)session.getAttribute("gender");
String address = (String)session.getAttribute("address");
%>
<!-- InstanceEndEditable -->

</head>
<body>
<div class="main">
  <div class="header">
    <div class="header-top">
    
      <div class="login-bg">
      <a href="login.jsp" class="black-link">登入</a><span class="style3"> |</span>
      <a href="#" class="black-link">買賣須知</a><span class="style3"> |</span>
      <a href="#" class="black-link">聯絡我們</a> <span class="style3">|</span>
      <a href="#" class="black-link">關於2HE</a>
      
      </div>
    </div>
    <div class="header-bottom">
      <div id="navcontainer">
        <ul class="navlist">
          <li class=""><a href="index.jsp">首頁</a></li>
          <li class=""><a href="#">要買</a></li>
          <li class=""><a href="AddItem.jsp?go=AddItem.jsp">要賣</a></li>
          <li class=""><a href="changeInfo.jsp?go=changeInfo.jsp">我的主頁</a></li>
          <li class=""><a href="#">我的信箱</a></li>
        </ul>
      </div>
      <!-- InstanceBeginEditable name="DoNotEdit" --><!-- InstanceEndEditable -->
    </div>
  </div>
  <div class="body-main"><!-- InstanceBeginEditable name="mainbody" -->
<br/>
   <br/>
   <div class="center-border">
	<div class="title-back">   
    <div class="registration-box">    
      <div id="msg" class="error-style">
        <%if ("1".equals(msg)) {%>
        <h3>請輸入正確之驗證碼</h3>        
        <%}else if("2".equals(msg)) { %>
         <h3>用戶名稱已被使用</h3>
        <%}else if("3".equals(msg)) { %>
        <h3 >電郵地址已被使用</h3>
        <%}else if("4".equals(msg)) { %>
        <h3>密碼不相容</h3>
        <%}else if("5".equals(msg)) {%>
        <h3>請細心閱讀使用者條款和細則, 然後按下同意</h3>
        <%}%>
        </div>
        <h2>請填寫個人資料</h2>
      <form name="register" action="RegistrationServlet" method="post">        
        <table width="607" height="594" cellpadding="5">
          <tr>
            <td width="119">用戶名稱:</td>
            <td width="476"><span id="sloginname">
              <input name="loginname" type="text" id="loginname" size="20" maxlength="10" value="${loginname}"/>
              
              <span class="textfieldRequiredMsg">必須填寫。</span> <span class="textfieldMinCharsMsg">最少六位英文和數字。</span></span><br/>(請輸入十位以下的英文,數字,不能加入任何符號)</td>
          </tr>
          <tr>
            <td>密碼:</td>
            <td><span id="spassword">
              <input name="password9" type="password" id="password9" size="20" maxlength="10" />
              
              <span class="passwordRequiredMsg">必須填寫.</span>
	<span class="passwordMinCharsMsg">最少六個英文或數字.</span>
	<span class="passwordInvalidStrengthMsg">密碼強度不足.</span>

     </span><br/>(六位至十位密碼)</td>
          </tr>
          <tr>
            <td>密碼確認:</td>
            <td><span id="srepassword">
              <input name="repassword" type="password" id="repassword" size="20" maxlength="10" />
              
             <span class="confirmInvalidMsg">請輸入與上相同密碼</span><span class="confirmRequiredMsg">必須填寫.</span>

             </span><br/>(請重新輸入密碼作確認)</td>
          </tr>
          <tr>
            <td>名:</td>
            <td><span id="sfirstname">
              <input name="firstname" type="text" id="firstname" size="20" maxlength="15" value="${firstname}"/>
              
              <span class="textfieldRequiredMsg">必須填寫。</span><span class="textfieldInvalidFormatMsg">格式無效。</span></span></td>
          </tr>
          <tr>
            <td>姓:</td>
            <td><span id="slastname">
              <input name="lastname" type="text" id="lastname" size="20" maxlength="15" value="${lastname}"/>
              
              <span class="textfieldRequiredMsg">必須填寫。</span></span></td>
          </tr>
          <tr>
            <td>年齡:</td>
            <td><span id="sage">
              <select name="age" id="age">
                <option value="12" <%=compare("12",age)%>>12 - 18 </option>
                <option value="19" <%=compare("19",age)%>>19 - 24 </option>
                <option value="25" <%=compare("25",age)%>>25 - 32 </option>
                <option value="33" <%=compare("33",age)%>>33 - 42 </option>
                <option value="43" <%=compare("43",age)%>>43 - 52 </option>
                <option value="53" <%=compare("53",age)%>> &gt; 53 </option>
              </select>
              <span class="selectRequiredMsg">請選擇。</span></span></td>
          </tr>
          <tr>
            <td>電郵地址:</td>
            <td><span id="semail">
              <input name="email" type="text" id="email" size="35" maxlength="35" value="${email}"/>
              
              <span class="textfieldRequiredMsg">必須填寫。</span><span class="textfieldInvalidFormatMsg">不正確的電郵地址。</span></span><br/>(登記系統將會發送啟動帳戶電郵到此地址)</td>
          </tr>
          <tr>
            <td>性別:</td>
            <td><span id="sgender">
              <select name="gender" id="gender">
                <option value="M"  <%=compare("M",gender)%>>男 </option>
                <option value="F" <%=compare("F",gender)%>>女</option>
              </select>
              <span class="selectRequiredMsg">>請選擇。</span></span> </td>
          </tr>
          <tr>
            <td>居住地區</td>
            <td><span id="saddress">
              <select name="address" id="address">
                <option value="HKI"  <%=compare("HKI",address)%>>香港島</option>
                <option value="KLN" <%=compare("KLN",address)%>>九龍</option>
                <option value="NT" <%=compare("NT",address)%>>新界</option>
                <option value="ISLAND" <%=compare("ISLAND",address)%>>離島</option>
              </select>
              <span class="selectRequiredMsg">>請選擇。</span></span> </td>
          </tr>
          <tr>
            <td>驗證碼:</td>
            <td><span id="scaptcha">
              <input name="captchacode" type="text" id="captchacode" size="20" maxlength="4" />
              <span class="textfieldRequiredMsg">必須填寫。</span></span> <br/>(輸入下圖顯示的驗證碼, 全部為細階 )</td>
          </tr>
          <tr>
            <td colspan="2" align="center"><div id="cimageframe"><img src="cimage"/></div>
              <br/>
              <a onclick="refresh()">refresh</a> </td>
          </tr>
          <tr>
            <td> 電郵通知: </td>
            <td>
              <input type="checkbox" name="notify" id="notify"  value="YES" checked="checked"/>
              可以<br/>
              你是否想我們發送物品更新通知到你的電郵？<br/>            </td>
          </tr>
          <tr>
            <td>同意條款:</td>
            <td><span id="sagreement">
              <input type="checkbox" name="agreement" id="agreement" />
              同意條款和細則&nbsp;<a onclick="javascript:window.open('terms.html')">» 按此參閱條款和細則</a><br/>
              <span class="checkboxRequiredMsg">請選擇。</span></span></td>
          </tr>
          <tr>
            <td colspan="2"><div align="center">
                <input type='image' src='images/confirm-bt.gif'/>
              </div></td>
          </tr>
        </table>
      </form>
    </div>
    </div>
    </div>
    <br/>
   <br/>
    <script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sloginname", "none", {validateOn:["blur"], minChars:6});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sfirstname", "custom", {validateOn:["change"], useCharacterMasking:true});
var sprytextfield3 = new Spry.Widget.ValidationTextField("slastname", "none", {validateOn:["change"], useCharacterMasking:true});
var sprytextfield5 = new Spry.Widget.ValidationPassword("spassword", {validateOn:["blur"], minChars:6});
var sprytextfield6 = new Spry.Widget.ValidationConfirm("srepassword", "spassword", {validateOn:["blur", "change"]});
var spryselect1 = new Spry.Widget.ValidationSelect("sgender");
var sprytextfield9 = new Spry.Widget.ValidationTextField("semail", "email", {validateOn:["blur"]});
var spryselect2 = new Spry.Widget.ValidationSelect("saddress", {isRequired:false});
var spryselect3 = new Spry.Widget.ValidationSelect("sage", {validateOn:["change"]});
var sprytextfield4 = new Spry.Widget.ValidationTextField("scaptcha", "none");
var sprycheckbox3 = new Spry.Widget.ValidationCheckbox("sagreement", {validateOn:["change"]});
//-->
</script>
    <!-- InstanceEndEditable --></div>
  <div class="footer">Copyright&copy; <a href="http://www.2handeasy.com" class="footer-link">二手易</a> All rights reserved.  |  版權所有不得轉載</div>
</div>
</body>
<!-- InstanceEnd --></html>
